<template>
	<view class="page flex-col">
		<image @click="listenerActionSheet" class="shareImg" src="../../static/com/icon_fx.png" mode=""></image>
		<image class="image_6" :src="pageData.image" mode=""></image>

		<view class="block_3 flex-col bj">
			<view class="text-wrapper_1 flex-row">
				<text class="text_6">{{pageData.name}}</text>
				<text class="text_7">{{pageData.title}}</text>
				<text class="text_8">{{pageData.categoryName}}</text>
			</view>
			<view class="block_4 flex-row">
				<view class="text-wrapper_2 flex-col" v-for="(item,index) in pageData.tag" :key="index">
					<text class="text_9">{{item}}</text>
				</view>

			</view>
			<view class="block_5 flex-row ">
			<!-- 	<view class="text-wrapper_4 flex-col">
					<text class="text_11">杭州</text>
				</view> -->
				<text class="text_12">{{pageData.hospitalName}}</text>
			</view>
			<view class="text-wrapper_5 flex-row">
				<text class="text_13 ">
					擅长：{{pageData.doctorDesc}}
				</text>

			</view>
		</view>
		<view class="block_6 flex-col bj">
			<view class="text-wrapper_6 flex-row justify-between">
				<text class="text_15">预约挂号</text>
				<!-- <text class="text_16 bc">重置</text> -->
			</view>
			<calendar :insert="true" :lunar="true" :start-date="'2019-3-2'" :end-date="'2090-5-20'"
				:selected="pageData.timeList" @change="changeCalendar"></calendar>
			<view class="block_9 flex-row justify-around" v-if="checkDate">

				<view class="block_11 flex-row" v-for="(item,index) in yyList" @click="btnDate(item,index)"
					:class="btnActive==index?'active':''">
					<view class="text-group_4 flex-col">
						<text class="text_50">{{item.timeType}}</text>
						<text class="text_51">{{btnActive==index?'已选择':'请选择'}}</text>
						<text class="text_52">{{item.bookDate}}{{item.isFull==false?'可约':'不可约'}}</text>
					</view>
				</view>
			</view>

			<view class="block_9 flex-row justify-between" v-else>

				选择预约日期
			</view>
		</view>
		<view class="block_12 flex-col bj" v-if="false">
			<text class="text_53">医疗服务</text>
			<view class="image_9">

			</view>
			<view class="box_3 flex-row" v-for="(item,index) in pageData.serviceList">
				<view class="image-text_1 flex-row justify-between">
					<view class="section_1 flex-col">
						<image :src="item.image" mode=""></image>
						<!-- <image src="" mode=""></image> -->
					</view>
					<view class="text-group_5 flex-col">
						<text class="text_54">{{item.name}}</text>
						<text class="text_55">{{item.desc}}</text>
					</view>
				</view>
				<view class="text-group_6 flex-col">
					<text class="text_56">{{item.discountPrice||0}}元/次</text>
					<text class="text_57">{{item.price||0}}元/次</text>
				</view>
				<image class="image_10" src="../../static/com/icon_more.png" mode=""></image>

			</view>

		</view>
		<view class="ding">

		</view>
		<view class="foot">
			<view class="footMsg" @click="goPage(item)">
				立即预约
			</view>

		</view>
		<uni-popup ref="safeguardPup" type="bottom">

			<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">

				<button class="item" open-type="share" hover-class='none' @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>

				<button class="item" hover-class='none' @tap="sharePoster">
					<view class="iconfont icon-haibao"></view>
					<view class="">生成海报</view>
				</button>
			</view>
		</uni-popup>
		<qrcode-poster @saveImgeOK="saveImgeOK" ref="poster" :title="pageData.name" :des="pageData.description"
			:headerImg="pageData.image" :subTitle='"￥"+pageData.price'></qrcode-poster>
		<home></home>
	</view>
</template>
<script>
	import QrcodePoster from '@/components/com/poster.vue'
	import home from '@/components/home/index.vue'
	import {
		getDoctorDetail,
		getDayInfo
	} from '@/api/togeterRich/family.js'
	import calendar from '@/pagesA/hospital/com/components/canlendar/bruce-calendar/components/bruce-calendar/bruce-calendar.vue'

	export default {

		components: {
			calendar,
			home,
			QrcodePoster

		},
		data() {
			return {
				yyList: [],
				checkDate: false,
				id: '',
				pageData: {},
				btnActive: null,
				zj: '',
				cganeDate: '',
				yydata: {}

			};
		},
		onLoad(e) {
			this.id = e.id
			this.init()
			uni.hideLoading()
		},
		methods: {
			saveImgeOK() {
				this.$refs.safeguardPup.close()
				// this.posters = false;
			},
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},
			listenerActionSheet: function() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					// #ifdef H5
					if (!this.imgTop) this.getImageBase64(this.storeImage);
					if (this.$wechat.isWeixin() === true) {
						this.weixinStatus = true;
					}
					// #endif
					this.$refs.safeguardPup.open()
					// this.posters = true;

				}
			},
			init() {
				let data = {
					id: this.id
				}
				getDoctorDetail(data).then(res => {
					console.log(res, 'www')
					this.pageData = res.data

				})
			},

			goPage(item) {
				// console.log(item, 'uuu')
				// return;
				if (this.btnActive == null) {
					this.toast("请选择预约日期")
					return;
				}
				// console.log(this.yydata, 'yydata')
				// return;
				// this.yydata.discountPrice = item.discountPrice
				let yydata = JSON.stringify(this.yydata);

				uni.navigateTo({
					url: `/pagesA/hospital/doctorPay?data=${yydata}&id=${this.pageData.id}`
				})

			},
			btnDate(item, indedx) {
				if (item.isFull == true) {
					this.toast("预约已满")
				} else {
					this.yydata = item
					this.btnActive = indedx
				}
				console.log(item, 'sss')

			},
			changeCalendar(e) {

				if (e.extraInfo.info) {
					if (e.extraInfo.info == '约满') {
						this.checkDate = false
						this.toast("已约满暂不可选")
					} else {
						this.checkDate = true
						console.log(e.fulldate, 'e.fulldate')
						this.getDayInfoInfo(e.fulldate)
						this.zj = e.lunar.ncWeek
						this.cganeDate = e.fulldate
					}
				} else {
					this.checkDate = false
					this.toast("暂不可选")
					// console.log("kongle")
				}
				// console.log(e.fulldate, '围殴是')
			},
			getDayInfoInfo(date) {
				let data = {
					id: this.pageData.id,
					date: date
				}
				getDayInfo(data).then(res => {
					this.yyList = res.data
					console.log(res, 'jjdj ')
				})
			},
			toast(tit) {
				uni.showToast({
					title: tit,
					icon: 'none'
				})
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import 'com/css/doctorInfo.css';
	@import '@/com/css/common.css';
.bc{
			color: $maincolor !important;
		}
		.bgb{
			border: 2rpx solid $maincolor !important;
		}
		.bb{
			background: $maincolor;
		}
	.foot {
		width: 100%;
		background: #fff;
		padding: 20rpx 0;
		position: fixed;
		bottom: 0;

		.footMsg {
			border-radius: 100rpx;
			color: #fff;
			text-align: center;
			width: 80%;
			margin: 0 auto;
			background: $maincolor;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.active {
		border-radius: 20rpx !important;
		padding: 30rpx !important;

		border: 2rpx solid $maincolor !important;
	}

	.bj {
		background: #fff;
	}
</style>